import React, { useState } from "react";
import {  Input, Select } from 'antd';
import { VideoCameraOutlined } from '@ant-design/icons';
const { Option } = Select;
const { Search } = Input;


const suffix = (
  <VideoCameraOutlined
    style={{
      fontSize: 16,
      color: '#ccc',
    }}
  />
);

const selectBefore = (
  <Select defaultValue="全部" style={{ width: "70px", fontWeight: "900" }}>
    <Option>全部</Option>
    <Option>h5</Option>
    <Option>海报</Option>
    <Option>长页</Option>
    <Option>表单</Option>
    <Option>互动</Option>
    <Option>电子画册</Option>
    <Option>视频</Option>
    <Option>解决方案</Option>
  </Select>
);
function Main(){
   return (
              <div className="main_top">
                <div className="top_A">
                  <img src="src/img/quan.png" alt="" />
                </div>
                <div className="top_B">
                  <Search addonBefore={selectBefore} suffix={suffix} defaultValue="游戏" enterButton style={{  border: "1px solid blue", borderRadius: "8px" }}/>      
                  <p>
                    <span className="onblue">邀请函</span>
                    <span className="onblue">游戏</span>
                    <span className="onblue">抽奖</span>
                    <span className="onblue">端午节</span>
                    <span className="onblue">招聘</span>
                    <span className="onblue">百日宴邀请函</span>
                  </p>
                </div>
                <div className="top_C">
                  <div className="rl">
                      <div className="rl_left">
                        <p style={{fontWeight:"bold"}}><span style={{fontSize:"22px"}}>22</span>/5 2024</p>
                        <p style={{fontSize:"12px",color:"#ccc"}}>周三 农历四月十五</p>
                      </div>
                       <div className="rl_right">
                            <p style={{fontWeight:"700"}}><img src="src/img/02_08.jpg" style={{width:"1vw",height:"2vh"}}></img>世界无烟日</p>
                       </div>
                  </div>
                </div>
              </div>
   )
}
export default Main